<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>账号中心</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/new.css" />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="lib/bootstrap.min.js" ></script>
		<link rel="stylesheet" href="css/gzh/userCenter.css" />
		<style type="text/css">
		.upic {
		    float: left;
		    margin: 64px 92px 0 64px;
		    text-align: center;
		    font-size: 14px;
		}
		.upic p{
			    margin-top: 10px;
		}
		.umsg {
		    margin: 32px 0 90px 297px;
		    text-align: left;
		}
		.umsg p {
		    font-size: 14px;
		    color: #999;
		    padding: 14px 18px 14px 22px;
		}
		.title {
		    font-size: 14px;
		    font-weight: bold;
		    color: #333;
		    margin: 48px 0 12px 22px;
		}
		.more {
		    float: right;
		    color: #007dff;
		}
		.uinfo {
		    color: #050505;
		    margin-right: 46px;
		}
		.space-pre {
		    white-space: pre;
		}
		.modal-title{
			text-align: center;
		}
		.modal-body input{
			    width: 100%;
		    height: 40px;
		    background-color: transparent;
		    border-width: initial;
		    border-style: none;
		    border-color: initial;
		    border-image: initial;
		    outline: none;
		    padding: 0px;
		     min-height: 40px;
		    background-color: rgb(239, 239, 239);
		    padding: 0px 16px;
		    border-radius: 22px;
		}
		.modal-dialog{
			position: fixed;
		    z-index: 10005;
		    width: 460px;
		    top: 50%;
		    left: 50%;
		    margin-left: -230px;
		    margin-top: -100px;
		    background-color: #FFF;
		    border: 1px solid #E5E5E5;
		    border-radius: 8px;
		    box-shadow: 0 1px 7px #afadae;
		    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
		    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
		    max-height: 100%;
		    overflow: visible;
		
		}
		.modal-header{
			border-top-left-radius: 5px;
		    border-top-right-radius: 5px;
		    border-bottom: 2px solid #f7f7f7;
		}
		</style>
	</head>
	<body>
		<div class="accountAll">
			<div class="head">
					<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="gzh-IDHead.html" width="100%"  height="auto"></iframe>
			</div>
			
			<div class="IsDhl">
				<ul class="nav nav-pills pull-right">
					<li><a href="http://127.0.0.1:8020/Vmall/IdAndSafe.html?__hbt=1536660173914">帐号与安全</a></li>
					<li class="active"><a href="#">个人信息</a></li>
					<li><a href="#">华为服务</a></li>
					<li><a href="#">安全中心</a></li>
					<li><a href="#">设置</a></li>
				</ul>
			</div>
			
			<div class="wp">
				<div class="pannel">
					<div class="upic">
				<a href="#" id="uploadImg"><img id="headPic" src="img/gzh/pic.png" ></a>
				<p id="uploadImgDiv">编辑头像</p>
			</div>

			<div id="upload_dialog_show" class="hidden"></div>
			
			<div class="umsg">
				<p class="title">公开信息</p>
				<p class="Isline">
				    <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal1">编辑</button>
					昵称：
					<span class="uinfo"><label id="nickname" class="space-pre"></label></span>								
			    </p>
			    	<p class="Isline">
			    		<!--<a id="forumNickNameLink" href="#" class="more">编辑</a>-->
			    		<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal2">编辑</button>
									    
				    
						论坛昵称：
						<span class="uinfo"><label id="forumNickname" class="space-pre"></label></span>								
				    </p>
				<p class="Isline">
					<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal3">选择</button>
					性别：
					<span class="uinfo"><label id="gender"></label></span>
				</p>
					<p class="Isline">
				  	<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal4">选择</button>
				  	地区：
				  	<span class="uinfo"><label id="cityarea"></label></span>
				  </p>				
				
				<p class="title">非公开信息</p>
				<!-- <p class="line">
					
				</p> -->
				<div class="Isline birthday_set_guide">
					生日：
					<span><label id="birthday"></label></span>
					<!-- 生日设置引导弹出框 -->	
					<div id="guideBg"  class="guide_bg">
					</div>
					<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal5">编辑</button>
				</div>
			</div>
		</div>

				</div>
				<div class="Isfoot">
						<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="gzh-IdFoot.html" width="100%"  height="50px"></iframe>
				</div>
			</div>
		<!--<div class="global_dialog_confirm_main" style="display: block;margin-top: -96px;">
			<div class="global_dialog_confirm_title"></div>
			<div class="global_dialog_confirm_content"></div>
			<div class="global_dialog_confirm_ft"></div>
			<div class="dialog-cancel"></div>
		</div>-->
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;            </button>
						<h4 class="modal-title" id="myModalLabel">
		               昵称           </h4>
					</div>
					<div class="modal-body">
						<input type="text" class="form-control" id="name" 
         placeholder="请输入昵称" value="帅哥阿辉">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭            </button>
						<input class="btn btn-primary" type="submit" value="提交更改"/>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;            </button>
						<h4 class="modal-title" id="myModalLabel">
		               论坛昵称           </h4>
					</div>
					<div class="modal-body">
						<p>设置后只能更改一次</p>
						<input type="text" class="form-control" id="name" 
         placeholder="请输入论坛名称">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭            </button>
						<input class="btn btn-primary" type="submit" value="提交更改"/>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		</body>
	</body>
</html>